import { defineStore } from "pinia";
import { ref, computed } from "vue";

// UI元素类型
export type UIElementType =
  | "clock"
  | "inventory"
  | "energy"
  | "menu"
  | "dialog";

// UI元素状态
interface UIElementState {
  visible: boolean; // 是否可见
  zIndex: number; // 绘制顺序
  data?: any; // 可以存储元素特定的数据
  resources?: HTMLImageElement | null; // 资源图像
  type?: string; // 元素类型
  text?: string; // 元素文本
  sourceRect?: {
    // 添加源图像裁剪区域
    x: number; // 源图像的左上角坐标
    y: number; // 源图像的左上角坐标
    width: number; // 裁剪区域的宽度
    height: number; // 裁剪区域的高度
  };
  position: { x: number; y: number }; // 绘制到画布上的位置
  size?: { width: number; height: number }; // 绘制到画布上的大小
  textOptions?: Record<string, any>; // 文本绘制选项
  rotation?: number; // 旋转角度
  rotationOrigin?: { x: number; y: number }; // 旋转中心点
  fillPercentage?: number; // 填充百分比
}

export const useUIStore = defineStore("ui", () => {
  // ui集合
  const uiElements = ref<Partial<Record<string, UIElementState>>>({});

  // 当前活动的UI元素
  const activeElement = ref<any | null>(null);

  // 显示UI元素
  const showElement = (type: string, data?: any) => {
    const element = uiElements.value[type];
    if (element) {
      element.visible = true;
      if (data) {
        element.data = data;
      }
      activeElement.value = type;
    }
  };

  // 隐藏UI元素
  const hideElement = (type: string) => {
    const element = uiElements.value[type];
    if (element) {
      element.visible = false;
      activeElement.value = null;
    }
  };

  // 切换UI元素的可见性
  const toggleElement = (type: string, data?: any) => {
    const element = uiElements.value[type];
    if (element) {
      if (element.visible) {
        hideElement(type);
      } else {
        showElement(type, data);
      }
    }
  };

  // 注册UI元素
  const registerElement = (type: string, state: UIElementState) => {
    uiElements.value[type] = state;
  };

  // 更新UI元素
  const updateElement = (id: string, updates: Partial<UIElementState>) => {
    if (uiElements.value[id]) {
      uiElements.value[id] = { ...uiElements.value[id], ...updates };
    }
  };

  return {
    uiElements,
    hideElement,
    showElement,
    toggleElement,
    registerElement,
    updateElement,
  };
});
